<template>
	<div class="home">
		<div class="header">
			<img class="src" src="../../assets/img/mobile/origin.webp" />
			<el-input class="input" v-model="input" placeholder="请输入内容"></el-input>
			<el-button style="height: 40px;" type="danger" icon="el-icon-search" @click="setSearch()"></el-button>
			<router-link to="/pc/mycart" class="myCart">
				<i class="el-icon-shopping-cart-2"></i>
				我的购物车</router-link>
		</div>

		<div class="headline2">
			<div style="display: flex; justify-content: space-between; width: 100%;">
				<div class="detail">
					<p style="text-align: center; line-height: 30px;">详情分类</p>
				</div>
				<div class="detail" style="width: 10%;">
					<p style="text-align: center; line-height: 30px;">热销</p>
				</div>
			</div>
			<div style="background-color: #f13f20; height: 2px;width: 100%;"></div>
		</div>
		<div class="carousel">
			<div class="classify">
				<ul style="height: 100%;">
					<router-link v-for="(item, i) in pressList" :key="i" style="color: black;"
						:to="`/pc/booklist?typeid=${item.id}`">
						<li>
							{{item.name}}
						</li>
					</router-link>
				</ul>
			</div>
			<div class="banner">
				<el-carousel :interval="5000" arrow="always" height="400px">
					<el-carousel-item v-for="(item,index) in HotBanner" :key="item.id">
						<img class="small" :src="`http://127.0.0.1/api/public/showimg/${item.picture}`" />
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="fiery">
				<ul style="width: 75%;height: 100%;">
					<li style="width: 100%;height: 20%; display: flex;" v-for="(item, index) in booklist"
						:key="item.id">
						<template v-if="index < 5">
							<router-link :to="`/pc/bookdetail/${item.id}`">
								<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
							</router-link>
							<div style="margin-left: 10px;">
								<h5>{{item.name}}</h5>
								<p style="margin-top: 10px;">{{item.maker}}</p>
								<p>{{item.author}}</p>
							</div>
						</template>
					</li>
				</ul>
				<ul style="width: 25%;height: 100%;">
					<li style="width: 100%;height: 20%; display: flex;" v-for="(item, index) in booklist"
						:key="item.id">
						<span v-if="index < 5">月售:{{item.salenum}}</span>
					</li>
				</ul>
			</div>
		</div>

		<div class="headline3">
			<div class="detail">
				<p style="text-align: center; line-height: 30px;">新作导购</p>
			</div>
			<div style="background-color: #f13f20; height: 2px;width: 100%;"></div>
		</div>
		<div class="footer">
			<ul>
				<li v-for="(item, index) in list" :key="item.id">
					<router-link :to="`/pc/bookdetail/${item.id}`">
						<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
					</router-link>
					<h3>{{item.name}}</h3>
					<span>￥{{item.price}}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				input: '',
				pressList: [],
				bannerlist: [],
				booklist: [],
				list: [],
				total: 0
			}
		},
		async mounted() {
			await this.$axios.get("/api/public/type/findAll2").then(res => {
				this.pressList = res.data.data
				this.pressList.sort(function(a, b) {
					return a.id - b.id
				})
			})
			this.$axios.get("/api/public/findHot/1/99").then(res => {
				this.bannerlist = res.data.data
			})
			await this.$axios.get("/api/public/findPageBook/0/0/0").then(res => {
				this.total = res.data.data.total
			})
			await this.$axios.get("/api/public/findPageBook/1/" + this.total + "/0").then(res => {
				this.booklist = res.data.data.books
			})
			this.booklist.sort(function(a, b) {
				let data = new Date(a.tmake).getTime()
				let data2 = new Date(b.tmake).getTime()
				return data2 - data
			})
			this.list = this.booklist.slice(0, 10);
			this.booklist.sort(function(a, b) {
				return b.salenum - a.salenum
			})
		},
		methods: {
			// findBook(typeid) {
			// 	this.$emit('typeid', typeid)
			// }
		},
		computed: {
			HotBanner() {
				this.bannerlist.sort((a1, a2) => {
					return a2.hot - a1.hot
				})
				let arr = [];
				for (let i = 0; i < this.bannerlist.length; i++) {
					arr.push(this.bannerlist[i])
				}
				return arr;
			},
			setSearch() {
				this.$router.push({
					path: '/pc/booklist',
					query: {
						title: this.input
					}
				});
				this.input = ''
			}
		}
	}
</script>

<style scoped>
	.home {
		width: 100%;
	}

	.home .header {
		display: flex;
		justify-items: center;
		text-align: center;
		padding: 20px 0;
		width: 100%;
	}

	.home .header .src {
		width: 80px;
		height: 80px;
		margin: 0 100px;
	}

	.home .header .input {
		margin-left: 10%;
		width: 30%;
	}

	.home .header .myCart {
		display: flex;
		align-items: center;
		justify-items: center;
		margin-left: 25%;
		height: 40px;
		padding: 5px;
		background-color: #f76666;
		color: white;
		border-radius: 8px;
	}

	.home .header .myCart:hover {
		padding: 8px;
		background-color: #f76666;
	}

	.home .headline2 {
		margin-left: 100px;
		margin-right: 100px;
		height: 30px;
		margin-top: 30px;
	}

	.home .headline2 .detail {
		width: 20%;
		height: 100%;
		color: white;
		background-color: #f13f20;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

	.home .carousel {
		display: flex;
		height: 400px;
		margin-left: 100px;
		margin-right: 100px;
		border: 2px solid #d5d5d5;
		margin-top: 5px;
	}

	.home .carousel .classify {
		padding-top: 10px;
		width: 30%;
		height: 95%;
		overflow: hidden;
		white-space: nowrap;
		overflow-y: auto;
	}

	.home .carousel .classify::-webkit-scrollbar {
		display: none;
	}

	.home .carousel .classify ul li {
		padding-left: 30px;
		height: 6.8%;
	}

	.home .carousel .classify ul li:hover {
		border: 1px solid #f76666;
		color: #f76666;
		cursor: pointer;
	}

	.home .carousel .banner {
		width: 100%;
		height: 100%;
		padding: 3px;
	}

	.home .carousel .banner img {
		width: 100%;
		height: 100%;
	}

	/* 穿刺 :css用于修改固定组件样式的操作 */
	.home .carousel .banner .el-carousel /deep/ .el-carousel_button {
		height: 5px !important;
	}

	.home .carousel .banner .el-carousel /deep/ .is-active .el-carousel_button {
		background-color: #a68b5b !important;
	}

	.home .carousel .fiery {
		display: flex;
		width: 35%;
		height: 100%;
		padding-left: 10px;
	}

	.home .carousel .fiery a {
		display: flex;
	}

	.home .carousel .fiery img {
		width: 50px;
		height: 50px;
	}

	.home .carousel .fiery h5 {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	.home .carousel .fiery p {
		text-align: start;
		white-space: nowrap;
		overflow: hidden;
	}

	.home .carousel .fiery h5:hover {
		color: #f76666;
		cursor: pointer;
	}

	.home .headline3 {
		width: 90%;
		height: 30px;
		margin: auto;
		margin-top: 30px;
	}

	.home .headline3 .detail {
		width: 20%;
		height: 100%;
		color: white;
		background-color: #f13f20;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

	.home .footer {
		width: 90%;
		height: 730px;
		margin: auto;
		margin-top: 20px;
	}

	.home .footer ul {
		display: flex;
		justify-items: center;
		text-align: center;
		flex-wrap: wrap;
		width: 100%;
	}

	.home .footer ul li {
		width: 20%;
		height: 375px;
	}

	.home .footer ul li img {
		width: 80%;
		height: 80%;
	}

	.home .footer ul li img:hover {
		width: 85%;
		height: 85%;
		border: 2px solid #2237ad;
	}
</style>